﻿<style>
    #container {
        background-color: white;
    }

    input {
        outline: none;
    }

    .tagSpan {
        padding: 2px;
        background-color: #FF5722;
        color: #fff;
        display: inline-block;
        font-size: 12px;
        margin-left: 3px;
        border-radius: 2px;
    }

    usr-title {
        font-family: georgia;
        color: #d04a12;
        font-style: italic;
        font-size: 1.2rem;
    }

    .search-tab-title {
        font-size: 1.2rem;
        font-family: Arial, sans-serif;
    }

    .badge {
        display: inline-block;
        padding: 3px 5px 1px;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25rem;
    }

    .badge-secondary {
        color: #fff;
        background-color: #868e96;
    }

    .btn-pwc {
        background-color: #E0301D;
        color: #fff;
        padding: .175rem .5rem;
        margin-bottom: 5px;
    }

    .fa {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .btn-group-vertical {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: start;
        align-items: center;
        -ms-flex-pack: center;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    body {
        overflow-y: auto;
    }

    #footer {
        position: static;
    }

    .DMS_left {
        width: 250px;
        margin-right: 10px;
    }

    .DMS_main {
        width: calc(100% - 530px);
        background: #fff;
        padding: 15px 15px;
    }

    .DMS_right {
        width: 300px;
        margin-left: 10px;
    }

        .DMS_right h4 {
            font-family: Georgia, sans-serif;
        }

    .DMS_conter {
        display: flex;
        justify-content: space-around;
    }

    .btn-group-vertical > .btn {
        width: 100px;
        min-width: 100px;
    }

    .DMS_main_img {
        width: 140px;
    }

    .DMS_main_btn {
        margin-bottom: 10px;
        display: flex;
        justify-content: flex-end;
    }

    .DMS_main_m {
        width: calc(100% - 230px);
        display: flex;
        justify-content: space-between;
    }

        .DMS_main_m .nav h4 {
            font-size: 20px;
            font-family: Arial, sans-serif;
            font-weight: bold;
            margin: 0 0 10px;
        }

    .DMS_main_flex {
        display: flex;
        width: 100%;
    }

    @media(min-width:1900px) {
        .DMS_main_flex {
            width: 90%;
        }
    }

    .DMS_banner_top {
        background-image: url("/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=61d4e973-860e-481b-bc49-bf499d8dc159");
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100px;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-fluid {
        padding: 0;
        background: #F0F0F0;
    }

    .DMS_btn_Search {
        background: #D04A02;
        height: 40px;
        color: #fff;
        font-size: 13px;
        border: none;
        padding: 5px 15px;
    }

    .DMS_input_Search {
        height: 40px;
        width: 450px;
        margin-right: 10px;
        padding: 0 5px;
        background: #fff;
    }

        .DMS_input_Search i {
            font-size: 20px;
            position: relative;
            padding: 0 10px;
            top: 3px;
        }

        .DMS_input_Search input {
            border: none;
            height: 40px;
        }

    .DMS_left ul {
        padding: 0;
        margin: 0;
    }

        .DMS_left ul li ul.nav li {
            background: #fff;
            margin: 5px 0 5px 30px;
            padding: 2px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

    .DMS_left_text {
        height: 40px;
        display: flex;
        justify-content: space-between;
        background: #fff;
        align-items: center;
    }

        .DMS_left_text p {
            font-size: 16px;
            margin: 0 15px;
        }

    .DMS_left .badge-secondary {
        border-radius: 3px;
        background: #EB8C00;
        margin-right: 15px;
        font-size: 18px !important;
    }

    .DMS_m_subitem {
        display: flex;
    }

    .DMS_subitem {
        color: #7D7D7D;
        font-size: 14px;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 108px;
        display: block;
        float: left;
        margin-left: 5px;
    }

    .DMS_m_subitem input {
        float: left;
    }

    .DMS_left ul li ul.nav li .badge-secondary {
        background: #707070 !important;
        margin: 5px 0 5px 30px;
        padding: 2px 10px;
        font-size: 14px !important;
    }

    .DMS_btn_1 {
        border: #E0301E 1px solid;
        background: #fff;
        color: #E0301E;
        margin-right: 10px;
    }

        .DMS_btn_1:hover {
            background: #E0301E;
            color: #fff;
        }

    .DMS_main_Do_ul {
        display: flex;
        justify-content: space-between;
    }

    .DMS_main_main_news {
        width: calc(100% - 15px);
        cursor: pointer;
    }

    .DMS_main_Do_ul ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: calc(100% - 15vw);
    }

        .DMS_main_Do_ul ul li {
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .DMS_main_Do_ul ul li span {
                width: 130px;
                display: block;
                color: #464646;
            }

    .DMS_Grant {
        display: flex !important;
        font-size: 14px;
        color: #707070;
        width: 250px;
    }

        .DMS_Grant p {
            font-weight: bold;
            width: 100px;
            color: #464646;
        }

    .DMS_add_btn {
        border-radius: 50%;
        background: #E0301E;
        cursor: pointer;
        height: 40px;
        width: 40px;
        float: right;
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .no-data {
        border: 1px solid #DEDEDE;
        margin: 0 15px;
    }

        .no-data .content h6 {
            color: #D04A02;
            font-size: 20px;
            font-family: Georgia, sans-serif;
        }

        .no-data .content p {
            color: #7D7D7D;
            font-size: 14px;
        }

        .no-data .content {
            padding: 20px 30px;
        }

    .progress-bar {
        background-color: #e0301e;
    }

    .DMS_main_Mobile_img,
    .filter-btn,
    .DMS_checkout_btn {
        display: none;
    }

    .nav-tabs {
        border-bottom: none;
    }
    /**/

    .DMS_right h4 {
        padding: 0 15px;
        margin: 10px 0 15px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .DMS_right .badge-secondary {
        float: right;
        font-size: 18px !IMPORTANT;
        font-family: Arial, sans-serif;
        background-color: #707070;
    }

    .DMS_right .table tr {
        background-color: #fff;
    }

    .DMS_right h4 span {
        font-family: Arial, sans-serif;
        font-size: 20px;
    }

    .DMS_right .table tr img {
        margin-left: 15px;
    }

    .DMS_main_Do_ul ul li i {
        font-style: inherit;
        display: block;
        width: calc(100% - 150px);
        color: #2D2D2D;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:focus,
    .nav-tabs > li.active > a:hover {
        color: #E0301E;
        font-weight: bold;
    }

        .nav-tabs > li.active > a .badge-secondary {
            background: #E0301E;
            color: #fff;
            border-radius: 0;
        }

    .badge-secondary {
        border-radius: 0;
    }

    @media(max-width:1530px) {
        .DMS_main_flex {
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .DMS_main_m {
            flex-flow: column;
            width: calc(100% - 140px);
        }

            .DMS_main_m .nav,
            .DMS_main_Do_ul {
                width: 100%;
            }

        .btn-group-vertical {
            flex-direction: row;
            align-items: center;
            display: flex;
        }

        .DMS_main_btn {
            margin: 5px 0;
        }

        .DMS_main_Do_ul ul {
            margin-right: 10px;
        }

        .DMS_Grant {
            justify-content: space-between;
            margin-right: 10px;
        }

        .navbar-top-links > li > a {
            padding: 0 20px;
        }
    }

    @media(max-width:1100px) {
        .nav-tabs {
            display: flex;
            height: 30px;
            overflow-x: auto;
        }

        .DMS_left {
            position: fixed;
            left: -200px;
            background: #fff;
            border-right: solid 1px #E0301E;
            border-bottom: solid 1px #E0301E;
            border-top: solid 1px #e0301e;
            z-index: 10;
            width: 200px;
        }

        .filter-btn {
            position: absolute;
            left: 200px;
            top: 50px;
            min-width: auto;
            font-size: 20px;
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 50px;
        }

            .filter-btn:hover i,
            .filter-btn:focus i {
                color: #fff;
            }

        .tab-content {
            margin-top: 0;
        }

        .DMS_left ul li ul.nav li {
            margin: 2px 0 2px 10px;
            padding: 2px 10px;
        }

        .DMS_left_text p {
            margin: 0 5px;
            font-size: 14px;
        }

        .DMS_left .badge-secondary {
            font-size: 16px !important;
        }

        .DMS_left_text {
            height: 35px;
        }

        .DMS_left ul li ul.nav li .badge-secondary {
            margin: 3px 0;
        }

        #container .badge {
            min-width: auto;
            font-size: 12px;
            margin-left: 2px;
        }

        .nav > li > a {
            padding: 5px;
        }

        .DMS_right {
            display: none;
        }

        .DMS_input_Search {
            width: 65%;
            margin-right: 0;
        }

        .DMS_banner_top {
            height: 80px;
        }

        .nav-tabs > li > a {
            display: flex;
            justify-content: center;
        }

        .search-tab-title {
            font-size: 14px;
            word-break: break-all;
        }

        .nav-tabs {
            border-bottom: none;
        }

        .DMS_add_btn {
            position: fixed;
            right: 10px;
            top: 200px;
            float: none;
            z-index: 10;
        }

        .DMS_main_flex {
            flex-flow: column;
            align-items: flex-start;
        }

        .DMS_main_m {
            display: block;
            width: 100%;
        }

        .btn-group-vertical {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 10px;
        }

        .DMS_main_btn {
            margin-left: 0;
            margin-top: 10px;
        }

        .DMS_main {
            width: 100%;
            padding: 10px 0;
        }

        .DMS_main_Do_ul ul {
            margin-right: 0;
            width: 100%;
        }

        .DMS_main_img {
            display: none;
        }

        .DMS_main_Mobile_img {
            display: block;
            float: left;
            margin-right: 10px;
        }

        .filter-btn,
        .DMS_checkout_btn {
            display: block;
        }

        .DMS_checkout_btn {
            top: 250px;
            display: flex;
        }

            .DMS_checkout_btn a {
                height: 25px;
                display: flex;
                align-items: center;
            }

            .DMS_checkout_btn i {
                font-size: 22px;
            }

        .DMS_main_m ul.nav {
            width: calc(100% - 100px);
            float: right;
            word-break: break-all;
        }

        .DMS_main_Do_ul {
            clear: both;
            margin: 0;
            width: 100%;
            flex-flow: column;
        }

        .btn-group-vertical > .btn + .btn,
        .btn-group-vertical > .btn + .btn-group,
        .btn-group-vertical > .btn-group + .btn,
        .btn-group-vertical > .btn-group + .btn-group {
            margin: 0;
            padding: 5px 12px;
        }

        .DMS_main_Mobile_img img {
            width: 85px !important;
            height: 85px !important;
        }

        .DMS_btn_1 {
            padding: 5px 12px !important;
            margin: 0 10px 0 0 !important;
        }

        .DMS_main_m ul.nav li h4 {
            font-size: 18px;
        }

        .DMS_Grant {
            justify-content: space-between;
            width: 100%;
            font-size: 12px;
        }

            .DMS_Grant p {
                font-weight: 400;
                width: auto;
                margin: 0;
                width: 130px;
            }

            .DMS_Grant span {
                width: calc(100% - 150px);
                color: #2D2D2D;
            }

        .DMS_left_m {
            overflow-y: auto;
            max-height: calc(100vh - 180px);
        }

        .DMS_main_main_news {
            display: flex;
            width: calc(100% - 100px);
            flex-flow: column;
        }
    }

    .DMS_left ul li ul.nav li.checkedli {
        box-shadow: 0px 0px 5px #EB8C00 inset;
    }

        .DMS_left ul li ul.nav li.checkedli .DMS_subitem {
            color: #EB8C00;
            font-weight: bold;
        }

        .DMS_left ul li ul.nav li.checkedli .badge-secondary {
            background: #EB8C00 !important;
        }

    #mainFilter > .DMS_left_m {
        display: none;
    }

    .tooltip {
        width: 260px;
        color: rgb(70, 70, 70);
        border-color: #404041;
    }

    .information-icon {
        border-radius: 50%;
        background: rgb(105, 105, 105);
        color: #fff;
        width: 14px;
        height: 14px;
        font-style: normal;
        font-family: Georgia, sans-serif;
        font-size: 10px;
        line-height: inherit;
        float: right;
        margin-left: 5px;
        display: inline-block;
        text-align: center;
        line-height: 16px;
    }

    .DMS_main .nav-tabs > li {
        display: flex;
    }

    .DMS_input_Search input {
        border: none;
        height: 40px;
        width: 380px;
    }

    @media(min-width:1300px) {
        .DMS_main {
            width: calc(100% - 730px);
        }

        .DMS_right {
            width: 500px;
        }
    }
</style>

<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    <div class="loadingoverlay" style="background-color: rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; background-image: url(&quot;&quot;); background-position: center center; background-repeat: no-repeat; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-size: 100px;"></div>
</div>
<div id="vue_det" style="display:none;" class="container-fluid">
    <div class="DMS_banner_top">

        <div class="DMS_input_Search"><i class="mdi mdi-magnify"></i><input type="text" v-model="searchKey" placeholder="Search Document…" value="Search Document…" v-on:keyup.enter="likeSearch" /></div>
        <input type="button" class="DMS_btn_Search" value="Search" v-on:click="likeSearch" />
    </div>
    <div class="DMS_conter">
        <div class="DMS_left" id="mainFilter" style="display:none;">
            <button type="button" class="btn btn-pwc filter-btn" v-model="filterShow" v-on:click="openNav"><i class="mdi mdi-filter"></i></button>
            <ul class="DMS_left_m">
                <li v-for="item in statisticResultList" v-if="item.DisplayName!='State'">
                    <div class="DMS_left_text">
                        <p>{{item.DisplayName}}</p>
                        <span class="badge badge-secondary">{{item.Count}}</span>
                    </div>
                    <ul class="nav">
                        <li v-for="subitem in item.Mapping" v-on:click="filterSearch(subitem)" v-bind:class="{'checkedli': subitem.State}">
                            <div class="DMS_m_subitem">
                                <span class="DMS_subitem">{{subitem.Value}}</span>
                            </div>
                            <span class="badge badge-secondary">{{subitem.Count}}</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="DMS_left" style="padding-left:10px;">
            <h4>
                <span style="color:black;">To do list</span>
                <span class="badge badge-secondary">{{myToDoCount}}</span>
            </h4>
            <div class="no-data" v-if="myToDoCount==0">
                <div class="content">
                    <!--<img src="/gtsventure/bms/Admin/HomePage/DownloadFile?fileIds=d534a4c2-8945-4729-928b-4745a9031760">-->
                    <h6>The content you’ve to do task will list here</h6>
                    <p>
                        No to do task for you at present.
                    </p>
                </div>
            </div>
            <table class="table" v-else>
                <tr v-for="item in dataMyToDoList" style="background:#fff;">
                    <td><img v-bind:src="getDocumentIcon(item.DocumentType)" height="30" width="30" /></td>
                    <td style="padding-top:10px;"><a style="text-decoration:underline;" v-bind:href="'/pwccnhk/gtsventure/vForm/Document/preview/'+item._id" target="_blank">{{item.Title}}</a></td>
                </tr>
                <tr style="text-align:center;" v-if="myToDoCount>dataMyToDoList.length">
                    <td colspan="2"><a class="btn btn-primary" v-on:click="showMoreTodoList">Show more</a></td>
                </tr>
            </table>
        </div>
        <div class="DMS_main" id="mainContent">
            <div class="row" style="display:none;">
                <ul class="list-inline">
                    <li v-for="item in filterList">{{item.ESName}}>>{{item.Value}}</li>
                </ul>
            </div>
            <ul id="myTab" class="nav nav-tabs">
                <li class="active" v-on:click="selectTypeChange('Published')">
                    <a href="#published" data-toggle="tab">
                        <span class="search-tab-title">Published</span>
                        <span class="badge badge-secondary">{{publishedCount}}</span>
                        <i class="information-icon" data-toggle="tooltip" data-placement="top" title="Published">i</i>
                    </a>
                </li>
                <li>
                    <a href="#expired" data-toggle="tab" v-on:click="selectTypeChange('Expired')">
                        <span class="search-tab-title">Expired</span>
                        <span class="badge badge-secondary">{{expiredCount}}</span>
                        <i class="information-icon" data-toggle="tooltip" data-placement="top" title="Expired">i</i>
                    </a>
                </li>
                <li v-on:click="selectTypeChange('Deleted')">
                    <a href="#deleted" data-toggle="tab">
                        <span class="search-tab-title">Recently Deleted</span>
                        <span class="badge badge-secondary">{{deletedCount}}</span>
                        <i class="information-icon" data-toggle="tooltip" data-placement="top" title="Recently Deleted">i</i>
                    </a>
                </li>
                <div>
                    <a class="DMS_add_btn" href="/pwccnhk/gtsventure/vForm/Document/Add" target="_blank" style="color:white;">+</a>
                </div>
                
                <div class="DMS_add_btn DMS_checkout_btn"><a href="/pwccnhk/gtsventure/Pages/MyCheckOut" target="_blank" style="color:white;"><i class="mdi mdi-file-document-outline"></i></a></div>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="published">
                    <table class="table">
                        <tr v-for="item in dataPublishedResultList">
                            <td>

                                <div class="DMS_main_flex">

                                    <div v-on:click="recordPreview(item.NoNotesExternalSourceURL)" class="DMS_main_flex">
                                        <div class="DMS_main_img">
                                            <img v-if="item.UploadMethod=='Multiple'" src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=254ea6dd-3703-4c95-8ee0-69250018fe57" width="120" height="120" />
                                            <img v-else v-bind:src="JSON.parse(item.DocumentFile)[0].imgSrc" />
                                        </div>
                                        <div class="DMS_main_m">
                                            <div class="DMS_main_Mobile_img">
                                                <img v-if="item.UploadMethod=='Multiple'" src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=254ea6dd-3703-4c95-8ee0-69250018fe57" width="120" height="120" />
                                                <img v-else v-bind:src="JSON.parse(item.DocumentFile)[0].imgSrc" />
                                            </div>
                                            <div class="DMS_main_main_news">
                                                <div class="nav">
                                                    <h4 class="usr-title">{{item.Title}}</h4>
                                                </div>
                                                <div class="DMS_main_Do_ul">
                                                    <div class="DMS_Grant">
                                                        <p>{{item.DocumentType}}</p><span>{{item.DocumentSize}}</span>
                                                    </div>
                                                    <ul>
                                                        <li><span>Document Owner(s):</span><i>{{item.DocumentOwner}}</i></li>
                                                        <li><span>Version:</span><i>{{item.VersionNum}}</i></li>
                                                        <li>
                                                            <span>Creation Date:<i></span>{{item.CreateDate}}</i>
                                                        </li>
                                                        <li>
                                                            <span>Modify Date:<i></span>{{item.ModifyDate}}</i>
                                                        </li>
                                                    </ul>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="DMS_main_btn">
                                        <div role="group" aria-label="Basic example" class="btn-group-vertical">
                                            <!-- <a class="btn DMS_btn_1" v-bind:href="item.NoNotesExternalSourceURL" target="_blank">
                                                                        <span class="glyphicon glyphicon-eye-open"></span>
                                                                        Preview
                                                                    </a>-->
                                            <a class="btn DMS_btn_1" v-if="item.UploadMethod=='Single'&&false" v-bind:href="JSON.parse(item.DocumentFile)[0].fileDownloadurl">
                                                <!--<span class="glyphicon glyphicon-download-alt"></span>-->
                                                Download
                                            </a>
                                            <div class="dropdown btn DMS_btn_1" v-if="item.UploadMethod=='Multiple'&&false">
                                                <button type="button" id="dropdownMenu1" data-toggle="dropdown" style="background:none; border:none">
                                                    <!-- <span class="glyphicon glyphicon-download-alt"></span>
                                                    -->
                                                    Download<span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                                    <li role="presentation" v-for="fileitem in JSON.parse(item.DocumentMutipleFile)">
                                                        <a role="menuitem" tabindex="-1" v-bind:href="fileitem.fileDownloadurl">{{fileitem.fileName}}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <a class="btn DMS_btn_1" v-on:click="recordDelete(item)" v-if="staffCode==item.CreateById">
                                                Delete
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr style="text-align:center;" v-if="publishedCount>dataPublishedResultList.length&&publishBusy!=1">
                            <td v-on:click="showMoreFilter('Published')"><a class="btn btn-primary">Show more</a></td>
                        </tr>
                        <tr style="text-align:center;" v-if="publishBusy==1">
                            <td>Data is loading......</td>
                        </tr>
                    </table>
                </div>
                <div class="tab-pane fade" id="expired">
                    <table class="table">
                        <tr v-for="item in dataExpiredResultList">
                            <td>
                                <div class="DMS_main_flex">
                                    <div v-on:click="recordPreview(item.NoNotesExternalSourceURL)" class="DMS_main_flex">
                                        <div class="DMS_main_img">
                                            <img v-if="item.UploadMethod=='Multiple'" src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=254ea6dd-3703-4c95-8ee0-69250018fe57" width="120" height="120" />
                                            <img v-else v-bind:src="JSON.parse(item.DocumentFile)[0].imgSrc" />
                                        </div>
                                        <div class="DMS_main_m">
                                            <div class="DMS_main_Mobile_img">
                                                <img v-if="item.UploadMethod=='Multiple'" src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=254ea6dd-3703-4c95-8ee0-69250018fe57" width="120" height="120" />
                                                <img v-else v-bind:src="JSON.parse(item.DocumentFile)[0].imgSrc" />
                                            </div>
                                            <div class="DMS_main_main_news">
                                                <div class="nav">
                                                    <h4 class="usr-title">{{item.Title}}</h4>
                                                </div>
                                                <div class="DMS_main_Do_ul">
                                                    <li class="DMS_Grant">
                                                        <p>{{item.DocumentType}}</p><span>{{item.DocumentSize}}</span>
                                                    </li>
                                                    <ul>
                                                        <li><span>Document Owner(s):</span><i>{{item.DocumentOwner}}</i></li>
                                                        <li><span>Version:</span><i>{{item.VersionNum}}</i></li>
                                                        <li><span>Creation Date:</span><i>{{item.CreateDate}}</i></li>
                                                        <li><span>Modify Date:</span><i>{{item.ModifyDate}}</i></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="DMS_main_btn">
                                        <div role="group" aria-label="Basic example" class="btn-group-vertical">
                                            <!-- <a class="btn DMS_btn_1" v-bind:href="item.NoNotesExternalSourceURL" target="_blank">
                                                               <span class="glyphicon glyphicon-eye-open"></span>
                                                                Preview
                                                            </a>-->
                                            <a class="btn DMS_btn_1" v-if="item.UploadMethod=='Single'&&false" v-bind:href="JSON.parse(item.DocumentFile)[0].fileDownloadurl">
                                                <!--<span class="glyphicon glyphicon-download-alt"></span>-->
                                                Download
                                            </a>
                                            <div class="dropdown btn DMS_btn_1" v-if="item.UploadMethod=='Multiple'&&false">
                                                <button type="button" id="dropdownMenu2" data-toggle="dropdown" style="background:none; border:none">
                                                    <!-- <span class="glyphicon glyphicon-download-alt"></span>
                                                    -->
                                                    Download<span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
                                                    <li role="presentation" v-for="fileitem in JSON.parse(item.DocumentMutipleFile)">
                                                        <a role="menuitem" tabindex="-1" v-bind:href="fileitem.fileDownloadurl">{{fileitem.fileName}}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </td>
                        </tr>
                        <tr style="text-align:center;" v-if="expiredCount>dataExpiredResultList.length&&expireBusy!=1">
                            <td v-on:click="showMoreFilter('Expired')"><a class="btn btn-primary">Show more</a></td>
                        </tr>
                        <tr style="text-align:center;" v-if="expireBusy==1">
                            <td>Data is loading......</td>
                        </tr>
                    </table>
                </div>
                <div class="tab-pane fade" id="deleted">
                    <table class="table">
                        <tr v-for="item in dataDeletedResultList">
                            <td>

                                <div class=" DMS_main_flex">
                                    <div v-on:click="recordPreview(item.NoNotesExternalSourceURL)" class="DMS_main_flex">

                                        <div class="DMS_main_img">
                                            <img v-if="item.UploadMethod=='Multiple'" src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=254ea6dd-3703-4c95-8ee0-69250018fe57" width="120" height="120" />
                                            <img v-else v-bind:src="JSON.parse(item.DocumentFile)[0].imgSrc" />
                                        </div>
                                        <div class="DMS_main_m">
                                            <div class="DMS_main_Mobile_img">
                                                <img v-if="item.UploadMethod=='Multiple'" src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=254ea6dd-3703-4c95-8ee0-69250018fe57" width="120" height="120" />
                                                <img v-else v-bind:src="JSON.parse(item.DocumentFile)[0].imgSrc" />
                                            </div>
                                            <div class="DMS_main_main_news">
                                                <div class="nav">
                                                    <h4 class="usr-title">{{item.Title}}</h4>
                                                </div>
                                                <div class="DMS_main_Do_ul">
                                                    <li class="DMS_Grant">
                                                        <p>{{item.DocumentType}}</p><span>{{item.DocumentSize}}</span>
                                                    </li>
                                                    <ul>
                                                        <li><span>Document Owner(s):</span><i>{{item.DocumentOwner}}</i></li>
                                                        <li><span>Version:</span><i>{{item.VersionNum}}</i></li>
                                                        <li><span>Creation Date:</span><i>{{item.CreateDate}}</i></li>
                                                        <li><span>Modify Date:</span><i>{{item.ModifyDate}}</i></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="DMS_main_btn">
                                        <div role="group" aria-label="Basic example" class="btn-group-vertical">
                                            <!-- <a class="btn DMS_btn_1" v-bind:href="item.NoNotesExternalSourceURL" target="_blank">
                                                             <span class="glyphicon glyphicon-eye-open"></span>
                                                                Preview
                                                            </a>-->
                                            <a class="btn DMS_btn_1" v-if="item.UploadMethod=='Single'&&false" v-bind:href="JSON.parse(item.DocumentFile)[0].fileDownloadurl">
                                                <!-- <span class="glyphicon glyphicon-download-alt"></span>-->
                                                Download
                                            </a>
                                            <div class="dropdown btn DMS_btn_1" v-if="item.UploadMethod=='Multiple'&&false">
                                                <button type="button" id="dropdownMenu3" data-toggle="dropdown" style="background:none; border:none">
                                                    <!-- <span class="glyphicon glyphicon-download-alt"></span>
                                                    -->
                                                    Download<span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
                                                    <li role="presentation" v-for="fileitem in JSON.parse(item.DocumentMutipleFile)">
                                                        <a role="menuitem" tabindex="-1" v-bind:href="fileitem.fileDownloadurl">{{fileitem.fileName}}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr style="text-align:center;" v-if="deletedCount>dataDeletedResultList.length&&deleteBusy!=1">
                            <td v-on:click="showMoreFilter('Deleted')"><a class="btn btn-primary">Show more</a></td>
                        </tr>
                        <tr style="text-align:center;" v-if="deleteBusy==1">
                            <td>Data is loading......</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="DMS_right">
            <div class="mycheckout">
                <h4>
                    <span style="color:black;">My Checkout Content</span>
                    <span class="badge badge-secondary">{{myCheckOutCount}}</span>
                </h4>
                <div class="no-data" v-if="myCheckOutCount==0">
                    <div class="content">
                        <!--<img src="/gtsventure/bms/Admin/HomePage/DownloadFile?fileIds=d534a4c2-8945-4729-928b-4745a9031760">-->
                        <h6>The content you’ve checked out will list here</h6>
                        <p>
                            If you want to make changes to a content and you want to make sure no one else can edit it, check out the content. When you finish editing and check in the content into the system, other people can see your changes and edit the content, if they have permission.
                        </p>
                    </div>
                </div>
                <table class="table" v-else>
                    <tr v-for="item in dataMyCheckoutList">
                        <td><img v-bind:src="getDocumentIcon(item.DocumentType)" height="30" width="30" /></td>
                        <td><a v-bind:href="'/pwccnhk/gtsventure/vForm/Document/Edit/'+item._id" target="_blank">{{item.Title}}</a></td>
                    </tr>
                    <tr style="text-align:center;" v-if="myCheckOutCount>dataMyCheckoutList.length">
                        <td colspan="2"><a class="btn btn-primary" v-on:click="showMoreCheckOut">Show more</a></td>
                    </tr>
                </table>
            </div>
            <div class="mySubmit" style="margin-top:10px;">
                <h4>
                    <span style="color:black;">My Submit Content</span>
                    <span class="badge badge-secondary">{{mySubmitCount}}</span>
                </h4>
                <div class="no-data" v-if="mySubmitCount==0">
                    <div class="content">
                        <!--<img src="/gtsventure/bms/Admin/HomePage/DownloadFile?fileIds=d534a4c2-8945-4729-928b-4745a9031760">-->
                        <h6>The content you’ve submit document will list here</h6>
                        <p>
                            There is no your submit document.
                        </p>
                    </div>
                </div>
                <table class="table" v-else>
                    <tr v-for="item in dataMySubmitList">
                        <td><img v-bind:src="getDocumentIcon(item.DocumentType)" height="30" width="30" /></td>
                        <td><a v-bind:href="'/pwccnhk/gtsventure/vForm/Document/Preview/'+item._id" target="_blank">{{item.Title}}</a></td>
                        <td style="color:#d04a12;">
                            {{item.State}}
                        </td>
                    </tr>
                    <tr style="text-align:center;" v-if="mySubmitCount>dataMySubmitList.length">
                        <td colspan="2"><a class="btn btn-primary" v-on:click="showMoreSubmit">Show more</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=b21a8457-24f9-452f-bfae-c94df0c31f59"></script>
<script src="/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=fb2e3700-1f29-4611-889b-5ce7c18cb955"></script>
<script>
    var SearchCode = "PwCCNHK_GTSVenture_DocumentOnly";
    function getBaseurl() {
        return getAppHomeUrl();
    };
</script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            searchKey: "",
            t: "All",
            q: "",
            f: "",
            s: "",
            p: 1,
            selectType: 'Published',
            publishIndex: 0,
            expiredIndex: 0,
            deleteIndex: 0,
            publishBusy: 0,
            expireBusy: 0,
            deleteBusy:0,
            requrl: getBaseurl()+"/Admin/Home/ESSearchResultByType",
            statisticResultList: [],
            dataPublishedResultList: [],
            dataExpiredResultList: [],
            dataDeletedResultList: [],
            publishedCount: 0,
            expiredCount: 0,
            deletedCount: 0,
            filterList: [],
            filterShow: true,
            staffCode: CustomCodeResultData.CurrentUser.UserInfo.StaffCode,
            dataMyCheckoutList: [],
            myCheckOutCount: 0,
            myCheckOutIndex: 0,
            dataMyToDoList: [],
            myToDoCount: 0,
            myToDoIndex: 0,
            dataMySubmitList: [],
            mySubmitCount: 0,
            mySubmitIndex: 0,
            filterShow: true
        },
        methods: {
            selectTypeChange: function (type) {
                if (this.selectType == type) {
                    return;
                }
                this.selectType = type;
                console.log("selectType", this.selectType);
                if (this.selectType == "Published") {
                    if (vm.$data.dataPublishedResultList.length > 0 || vm.$data.publishedCount == 0
                        || vm.$data.dataPublishedResultList.length == vm.$data.publishedCount
                        || this.publishBusy==1) return;
                }
                else if (this.selectType == "Expired") {
                    console.log("vm.$data.dataExpiredResultList.Count",vm.$data.dataExpiredResultList.Count);
                    if (vm.$data.dataExpiredResultList.length > 0 || vm.$data.expiredCount == 0
                        || vm.$data.dataExpiredResultList.length == vm.$data.expiredCount
                        || this.expireBusy == 1) return;
                }
                else if (this.selectType == "Deleted") {
                    if (vm.$data.dataDeletedResultList.length > 0 || vm.$data.deletedCount == 0
                        || vm.$data.dataDeletedResultList.length == vm.$data.deletedCount
                        || this.deleteBusy == 1) return;
                }
                vm.loadData();
            },
            loadData: function () {
                var filter = "C4-WorkflowStateDisplayName__" + this.selectType;
                console.log(filter);
                var index = this.publishIndex;
                if (this.selectType == "Published") {
                    this.publishIndex += 1;
                    index = this.publishIndex;
                    this.publishBusy = 1;
                }
                else if (this.selectType == "Expired") {
                    this.expiredIndex += 1;
                    index = this.expiredIndex;
                    this.expireBusy = 1;
                }
                else if (this.selectType == "Deleted") {
                    this.deleteIndex += 1;
                    index = this.deleteIndex;
                    this.deleteBusy = 1;
                }
                var Jsondata = {
                    "t": this.t,
                    "q": this.q,
                    "f": filter,
                    "s": "",
                    "p": index
                };

                $.post(this.requrl, JSON.stringify(Jsondata)).success(function (response) {
                    var searchResult = JSON.parse(response);
                    console.log("loaddata_searchResult", searchResult);
                    var tempresult;
                    for (i = 0; i < searchResult.ass.SearchSettings.length; i++) {
                        if (searchResult.ass.SearchSettings[i].SearchCode == SearchCode) {
                            tempresult = searchResult.ass.SearchSettings[i].SearchResultItem;
                            break;
                        }
                    }
                    var SearchResultItem = JSON.parse(tempresult);
                    console.log("loaddata_SearchResultItem", SearchResultItem);
                    var StatisticResult = SearchResultItem.StatisticResult;
                    console.log("loaddata_StatisticResult", StatisticResult);
                    var ResultList = SearchResultItem.ResultList;
                    console.log("loaddata_ResultList", ResultList);
                    var busy = 0;
                    if (ResultList == undefined || ResultList.length < SearchResultItem.RecordPerPage) {
                        busy = 2;
                    }

                    if (vm.$data.selectType == "Published") {
                        vm.$data.publishBusy = busy;
                    }
                    else if (vm.$data.selectType == "Expired") {
                        vm.$data.expireBusy = busy;
                    }
                    else if (vm.$data.selectType == "Deleted") {
                        vm.$data.deleteBusy = busy;
                    }
                    $.each(ResultList, function (index, item) {
                        if (item.State == "Published") {
                            vm.$data.dataPublishedResultList.push(item);
                        }
                        if (item.State == "Expired") {
                            vm.$data.dataExpiredResultList.push(item);
                        }
                        if (item.State == "Deleted") {
                            vm.$data.dataDeletedResultList.push(item);
                        }
                    });
                    $("#vue_det").show();
                    $('#loadingModal').modal('hide');
                });
            },
            callSearch: function () {
                this.publishIndex = 0;
                this.expiredIndex = 0;
                this.deleteIndex = 0;

                var Jsondata = {
                    "t": this.t,
                    "q": this.q,
                    "f": this.f,
                    "s": this.s,
                    "p": this.p
                };
                var filter = JSON.stringify(Jsondata);
                $.post(this.requrl, filter, function(response) {
                    var result = JSON.parse(response);
                    console.log(result);
                    for (var m = 0; m < result.ass.SearchSettings.length; m++) {
                        if (result.ass.SearchSettings[m].SearchCode == SearchCode) {
                            var searchResultItem = JSON.parse(result.ass.SearchSettings[m].SearchResultItem);
                            console.log("searchResultItem", searchResultItem);
                            var statisticResult = searchResultItem.StatisticResult;
                            $.each(statisticResult[0].Mapping, function(index, item) {
                                switch (item.Value) {
                                    case "Published":
                                        vm.$data.publishedCount = item.Count;
                                        break;
                                    case "Expired":
                                        vm.$data.expiredCount = item.Count;
                                        break;
                                    case "Deleted":
                                        vm.$data.deletedCount = item.Count;
                                        break;
                                }
                            });

                            vm.loadData();

                            return;





                            vm.$data.statisticResultList.length = 0;
                            var filterStr = vm.$data.f;
                            $.each(statisticResult, function(index, item) {
                                var filterItem = {};
                                filterItem.Count = item.Count;
                                filterItem.DisplayField = item.DisplayField;
                                filterItem.DisplayName = item.DisplayName;
                                var filterMapping = [];
                                for (var m = 0; m < item.Mapping.length; m++) {
                                    var subMapping = {};
                                    subMapping.Count = item.Mapping[m].Count;
                                    subMapping.ESName = item.Mapping[m].ESName;
                                    subMapping.Value = item.Mapping[m].Value;
                                    subMapping.State = false;

                                    if (filterStr != "") {
                                        var filterList = filterStr.split('||');
                                        $.each(filterList, function(findex, fitem) {
                                            var vfilter = fitem.split('__');
                                            if (vfilter[0] == item.DisplayField) {
                                                for (var n = 1; n < vfilter.length; n++) {
                                                    if (subMapping.Value == vfilter[n]) {
                                                        subMapping.State = true;
                                                        break;
                                                    }
                                                }
                                            }
                                        });
                                    }

                                    filterMapping.push(subMapping);
                                }
                                filterItem.Mapping = filterMapping;
                                vm.$data.statisticResultList.push(filterItem);
                            });
                            console.log(vm.$data.statisticResultList);


                            var resultList = searchResultItem.ResultList;
                            $.each(resultList, function(index, item) {
                                if (item.State == "Published") {
                                    vm.$data.dataPublishedResultList.push(item);
                                }
                                if (item.State == "Expired") {
                                    vm.$data.dataExpiredResultList.push(item);
                                }
                                if (item.State == "Deleted") {
                                    vm.$data.dataDeletedResultList.push(item);
                                }
                            });

                            $('#loadingModal').modal('hide');

                            break;
                        }
                    }

                });
            },
            filterSearch: function(item) {
                var index = -1;
                for (var i = 0; i < vm.$data.filterList.length; i++) {
                    if (vm.$data.filterList[i].ESName == item.ESName && vm.$data.filterList[i].Value == item.Value) {
                        index = i;
                    }
                }

                if (index == -1) {
                    vm.$data.filterList.push(item);
                } else {
                    vm.$data.filterList.splice(index, 1);
                }

                var sortarr = vm.$data.filterList.sort(function(a, b) {
                    return a.ESName.localeCompare(b.ESName);
                });

                var map = [];
                var filter = "";
                for (var m = 0; m < sortarr.length; m++) {
                    if (map.indexOf(sortarr[m].ESName) > -1) {
                        filter += "__" + sortarr[m].Value;
                    } else {
                        map.push(sortarr[m].ESName);
                        filter += "||" + sortarr[m].ESName + "__" + sortarr[m].Value;
                    }
                }

                vm.$data.dataPublishedResultList.length = 0;
                vm.$data.dataExpiredResultList.length = 0;
                vm.$data.dataDeletedResultList.length = 0;

                this.f = filter.replace('||', '');
                this.p = 1;
                vm.callSearch();
            },
            likeSearch: function() {
                vm.$data.q = this.searchKey;
                vm.$data.f = "";
                vm.$data.s = "";
                vm.$data.p = 1;

                vm.$data.dataPublishedResultList.length = 0;
                vm.$data.dataExpiredResultList.length = 0;
                vm.$data.dataDeletedResultList.length = 0;

                vm.callSearch();
            },
            recordDelete: function(item) {
                var r = confirm("Are you sure you want to delete it?");
                if (r) {
                    var Jsondata = {
                        "Token": "",
                        "ActionCode": "",
                        "EntityName": "Document",
                        "StaffId": "System",
                        "StaffName": "System",
                        "CurrentUserRole": [],
                        "ActionMessage": "Submit",
                        "UpdateWorkflowArgs": false,
                        "Items": null
                    };
                    var ids = [item.SourceID];
                    Jsondata.DocIds = ids;
                    Jsondata.FieldsValue = {
                        "C4-WorkflowStateDisplayName": "Deleted"
                    };
                    var url = getBaseurl()+"/customapi/BatchUpdateDocs";
                    $.post(url, Jsondata, function(response) {
                        if (response.StatusCode == 200) {
                            window.location.href = window.location.href;
                        }
                    });
                }
            },
            recordPreview: function(url) {
                window.open(url);
            },
            showMoreFilter: function(DataType) {
                vm.loadData();
            },
            getMyCheckOut: function() {
                var url = "https://appcnhkdm450.digitalmaker.asia.pwcinternal.com/pwccnhk/gtsventure/customapi/RetrieveQueryDocs";
                var Jsondata = {};
                Jsondata.Token = "";
                Jsondata.EntityName = "q10z7uxi3ad";
                Jsondata.Size = 20;
                Jsondata.Index = this.myCheckOutIndex == 0 ? 0 : this.myCheckOutIndex * 20 - 1;
                var searchItem = [];
                searchItem.push({
                    Method: "And",
                    Operator: "Equal",
                    Name: "CheckStatus",
                    Value: "Checked Out"
                });
                searchItem.push({
                    Method: "And",
                    Operator: "Equal",
                    Name: "CheckCreatorId",
                    Value: this.staffCode
                });
                searchItem.push({
                    Method: "And",
                    Operator: "Equal",
                    Name: "IsDeleted",
                    Value: 0
                });
                Jsondata.SearchItem = searchItem;
                Jsondata.Order = {
                    "C4-ModifyDate": "Descending"
                };
                Jsondata.Columns = ["Title", "DocumentType", "C4-CreateDate", "C4-CreateBy"];
                $.post(url, Jsondata, function(response) {
                    if (response.StatusCode == 200) {
                        vm.$data.myCheckOutCount = response.Data.total;
                        if (Jsondata.Index == 0) {
                            vm.$data.dataMyCheckoutList = response.Data.rows;
                        } else {
                            $.each(response.Data.rows, function(index, item) {
                                vm.$data.dataMyCheckoutList.push(item);
                            });
                        }
                    }
                });
            },
            showMoreCheckOut: function() {
                this.myCheckOutIndex += 1;
                vm.getMyCheckOut();
            },
            getTodoList: function() {
                var url = getBaseurl()+"/customapi/RetrieveQueryDocs";
                var Jsondata = {};
                Jsondata.Token = "";
                Jsondata.EntityName = "q10z7uxi3ad";
                Jsondata.Size = 20;
                Jsondata.Index = this.myToDoIndex == 0 ? 0 : this.myToDoIndex * 20 - 1;
                var searchItem = [];
                searchItem.push({
                    Method: "And",
                    Operator: "Equal",
                    Name: "C4-CurrentWorkflowUser",
                    Value: this.staffCode
                });
                searchItem.push({
                    Method: "And",
                    Operator: "NotEqual",
                    Name: "C4-WorkflowStateDisplayName",
                    Value: "Draft"
                });
                searchItem.push({
                    Method: "And",
                    Operator: "NotEqual",
                    Name: "C4-WorkflowStateDisplayName",
                    Value: "Published"
                });

                Jsondata.SearchItem = searchItem;
                Jsondata.Order = {
                    "C4-ModifyDate": "Descending"
                };
                Jsondata.Columns = ["Title", "DocumentType", "C4-CreateDate", "C4-CreateBy"];
                $.post(url, Jsondata, function(response) {
                    if (response.StatusCode == 200) {
                        vm.$data.myToDoCount = response.Data.total;
                        if (Jsondata.Index == 0) {
                            vm.$data.dataMyToDoList = response.Data.rows;
                        } else {
                            $.each(response.Data.rows, function(index, item) {
                                vm.$data.dataMyToDoList.push(item);
                            });
                        }
                    }
                });
            },
            showMoreTodoList: function() {
                this.myToDoIndex += 1;
                vm.getTodoList();
            },
            getMySubmitList: function () {
                var url = getBaseurl() + "/customapi/RetrieveQueryDocs";
                var Jsondata = {};
                Jsondata.Token = "";
                Jsondata.EntityName = "q10z7uxi3ad";
                Jsondata.Size = 20;
                Jsondata.Index = this.mySubmitIndex == 0 ? 0 : this.mySubmitIndex * 20 - 1;
                var searchItem = [];
                searchItem.push({
                    Method: "And",
                    Operator: "Equal",
                    Name: "DocumentOwner",
                    Value: this.staffCode
                });
                Jsondata.SearchItem = searchItem;
                Jsondata.Order = {
                    "C4-WorkflowStateDisplayName": "Descending"
                };
                Jsondata.Columns = ["Title", "DocumentType", "C4-CreateDate", "C4-CreateBy", "C4-WorkflowStateDisplayName"];
                $.post(url, Jsondata, function (response) {
                    if (response.StatusCode == 200) {
                        vm.$data.mySubmitCount = response.Data.total;
                        $.each(response.Data.rows, function (index, item) {
                            item.State = item["C4-WorkflowStateDisplayName"];
                            if (item.State != 'Published' && item.State != 'Expired' && item.State != "Deleted" && item.State != "Draft")
                                item.State = "Processing";
                            vm.$data.dataMySubmitList.push(item);
                        });
                    }
                });
            },
            showMoreSubmit: function () {
                this.mySubmitIndex += 1;
                vm.getMySubmitList();
            },
            getDocumentIcon: function(type) {
                var url = "";
                switch (type.toLowerCase()) {
                    case "bmp":
                        url =getBaseurl()+"/Admin/HomePage/DownloadFile?fileIds=50495759-ebb8-417c-82c3-2a8ebaff0d1a";
                        break;
                    case "doc":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=15c2fd97-056e-4a1c-a783-00ed66548194";
                        break;
                    case "docx":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=05ac3efa-7988-4d0d-8837-2350ae7da275";
                        break;
                    case "gif":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=6b33b954-5d40-4b18-b402-4a02ce99b905";
                        break;
                    case "jpeg":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=68570012-373f-4066-a337-1396cea85dc1";
                        break;
                    case "jpg":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=cf34ce35-c4a0-4d98-9c0c-cefbbe727f24";
                        break;
                    case "pdf":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=c9dca41e-daa7-4877-9022-7c4070c83f22";
                        break;
                    case "ppt":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=f28a28e4-c5e8-4268-9c4b-cbebf051c02b";
                        break;
                    case "pptx":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=f31d224f-fa15-4925-abb2-087656ebb94b";
                        break;
                    case "psd":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=884bc4c5-2867-423f-8270-28b00947f780";
                        break;
                    case "tif":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=dc5a5367-2617-4283-90c8-af606faf5ac2";
                        break;
                    case "tiff":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=a7461cf3-1e6a-40f8-9c0f-f684468bf9e2";
                        break;
                    case "vsd":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=c4b72d21-f070-4514-9beb-5bd562bb1c5e";
                        break;
                    case "vsdx":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=11935fd5-93df-463d-bf80-70fb63d18ed7";
                        break;
                    case "xls":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=7f0e796b-55c7-45a5-b009-dc6730669c0c";
                        break;
                    case "xlsx":
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=88aa2de8-cdfd-464b-95a9-372d55841db4";
                        break;
                    default:
                        url = getBaseurl() + "/Admin/HomePage/DownloadFile?fileIds=0b65a60c-6c6a-43a0-bab7-b5881dd97261";
                        break;
                }
                return url;
            },
            initLoadData: function() {
                $('#loadingModal').modal({
                    backdrop: 'static',
                    keyboard: false
                });
                setTimeout(function() {
                    vm.getMyCheckOut();
                    vm.getTodoList();
                    vm.getMySubmitList();
                    vm.callSearch();
                }, 500);
            },
            openNav: function() {
                if (this.filterShow) {
                    this.filterShow = false;
                    $("#mainFilter").css("left", "0");
                } else {
                    this.filterShow = true;
                    $("#mainFilter").css("left", "-200px");
                }
            }
        }
    });

    vm.initLoadData();
</script>
<script>
    window.onload = function() {
        $("[data-toggle='tooltip']").tooltip({
            html: true
        });
    };
</script>